<template>
  <div class="space">
    <back />
    <preview ref="preview" />
    <div class="bg">
      <img :src="userInfo.avatar" alt="" /> 
      <div class="bg-out"></div>
      <div class="userInfo">
        <div class="avatar">
          <img :src="userInfo.avatar" alt="" />
        </div>
        <div class="nickname">{{ userInfo.nickname }}</div>
      </div>
    </div>
    <!-- 已发表的动态 -->
    <section>
      <div
       v-show="dongTai.length" v-for="(item, index) in dongTai"
        class="item"
        @click="to_commentd(item)"
      >
        <div class="item-user">
          <img :src="userInfo.avatar" alt="" />
          <div>{{ userInfo.nickname }}</div>
        </div>
        <div class="item-content">
          <p v-html="EmojiHandle(item.message)"></p>
          <div  class="img" @click.stop="preview(item.img)">
            <div v-for="(img, i) in item.img" class="img-item">
             <img :src="img" alt="" />
            </div>
          </div>
        </div>
        <div class="item-bottom">
          <img src="../../../assets/img/Profile/space/浏览.svg" alt="" /><span
            >{{ item.browse }}</span
          >
          <img src="../../../assets/img/Profile/space/评论.svg" alt="" /><span
            >{{ item.comment.length }}</span
          >
          <img v-if="item.great.filter(e=>e==_id).length" src="../../../assets/img/Profile/space/已点赞.svg" alt="" @click.stop="handleClickGreat(item)">
          <img v-else src="../../../assets/img/Profile/space/未点赞.svg" alt="" @click.stop="handleClickGreat(item)" /><span
            >{{ item.great.length }}</span
          >
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import {emojis} from '../../../common/emoji'
import Back from "../../../components/Back/Back.vue";
import Preview from '../../../components/Preview/Preview.vue';
export default {
  components: { Back, Preview },
  name: "Space",
  data() {
    return {
      userInfo:{},
      dongTai: []
    };
  },
  computed: {
    _id() {
      return this.$store.getters.user._id;
    },
    uid() {
      return this.$route.params.uid;
    },
    
  },
  created() {
    this.initUser();
    this.initComs();
  },
  methods: {
    initUser(){//获取当前查看的用户信息
      this.$axios({
       url:'/users/getuser',
       params:{
        uid:this.uid
       }
      }).then(res=>{
       this.userInfo = res.data
      })
    },
    initComs() {//获取当前用户发过的动态
      this.$axios({
        url: "/square/findbyid",
        params: {
          uid: this.uid
        }
      }).then(res => {
        this.dongTai = res.data;
        console.log(res);
      });
    },
    to_commentd(i){//跳转到动态详情
     let cid = i._id
     this.$router.push('/comment_detail/'+ cid)
    },
    preview(img){//照片预览
      this.$refs.preview.show(img)
      console.log(img)
    },
    handleClickGreat(item) {
      //点赞处理
      let uid = this._id;
      let isClick = item.great.indexOf(uid)
      console.log(isClick)
      if (isClick!=-1) {
        console.log("取消点赞");
        item.great.splice(item.great.indexOf(uid), 1);
      } else {
        console.log("点赞");
        item.great.push(uid);
      }
      let data = {
        uid: this._id,
        cid: item._id
      };
      this.$axios({
        url: "/square/clickgood",
        method: "post",
        data: data
      }).then(res => {
        // console.log(res);
      });
    },
    //表情处理函数
    EmojiHandle(msg) {
      console.log(msg);
      let reg = /\[(.*?)\]/g;
      let text = msg.match(reg);
      console.log(text);
      if (text) {
        text.forEach(e => {
          let file = emojis.filter(item => {
            if (item.mark == e) {
              return item.file;
            }
          });
        msg = this.replaceCode(file,msg)
        });
      return msg
        // return msg = msg
      }else{
        return msg
      }
    },
    replaceCode(emojis,content){
      console.log(emojis,content)
      let newContent = ''
      if(emojis==[]){
        return msg
      }
      for(let i = 0; i < emojis.length; i++){
        newContent = content.replace(emojis[i].mark,`<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${emojis[i].file}" >`)
        console.log(newContent)
        // emojisArr.shift()
        // console.log(emojisArr)
        // return this.replaceCode(emojisArr,newContent)
        
      }
      return newContent
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.space {
}
.bg {
  width: 100%;
  height: 250px;
  position: relative;
}
.bg img {
  width: 100%;
  height: 100%;
}
.bg-out {
  width: 100%;
  height: 250px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(146, 144, 144, 0.5);
}
.userInfo {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10%;
  display: flex;
}
.avatar {
  width: 60px;
  height: 60px;
  margin-left: 10px;
  border-radius: 50%;
  background-color: #fff;
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.nickname {
  line-height: 40px;
  margin-left: 10px;
}

section {
  padding: 10px 5px 50px 5px;
  background-color: #eee;
}
.item {
  width: 100%;
  /* height: 100px; */
  border-radius: 10px;
  background-color: #fff;
  margin-top: 5px;
  padding: 10px 0;
}

.item-user {
  display: flex;
  padding: 10px 5px;
}
.item-user img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.item-user div {
  font-size: 12px;
  color: #333;
  margin-left: 5px;
}
.item-content {
  padding: 5px 5px;
}
.item-content p {
  padding: 5px 10px;
}
.img {
  width: 100%;
  display: flex;
   flex-wrap: wrap;
  /* height: 200px; */
}
.img-item{
  margin-left: 5px;
 width: 110px;
 height: 110px;
 overflow: hidden;
 border-radius: 10px;
}
.img img {
  width: 100%;
  /* height: 100%; */
  border-radius: 10px;
}
.item-bottom {
  text-align: right;
}
/* 010-597-775 */
</style>
